import { useState } from "react";
import { memo } from "react";
// memo 参数二为对比函数 当返回true时则不渲染 返回false才渲染
let Child = memo((props)=>{
    console.log("渲染啦")
    let {item} = props;
    return <div>
        {item.name} ---- {item.age}
    </div>
},(props,newProps)=>{
    console.log(props)
    console.log(newProps)
    if(JSON.stringify(props) === JSON.stringify(newProps)){
        return true 
    }
    return false
})


function App(){
    let [list,setList] = useState([
        {
            name:"张三",
            age:18,
        },{
            name:"李四",
            age:20
        }
    ]);
    return (
        <div>
            <h1>memo深对比</h1>
            <div>
                {
                    list.map((item,index)=>{
                        return <Child key={index} item={item}></Child>
                    })
                }
            </div>
            <button onClick={()=>{
                let newList = JSON.parse(JSON.stringify(list))
                newList[1].age=25;
                setList(newList)
            }}>
                改变年龄
            </button>
        </div>
    )
}

export default App;